<template>
  <div>
    <van-nav-bar
      title="注册"
      left-text="返回"
      right-text="登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-form>
      <van-field
        v-model="name"
        name="用户名"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="pword1"
        type="password"
        name="密码"
        label="密码"
        placeholder="请输入密码"
        @mouseout="checkpwd1"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        id="pwd2"
        v-model="pword2"
        type="password"
        name="密码"
        label="请确认密码"
        placeholder="请输入密码"
        @mouseout="checkpwd2"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="checkForm"
          >立即注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Dialog } from 'vant';


export default {
  data() {
    return {
      name: "",
      pword1: "",
      pword2: "",
      pwd2State: "",
      pwd1State: "",
    };
  },
  methods: {
    onClickRight() {
      this.$router.push("/");
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    checkpwd2() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pword2) && this.pword1 == this.pword2) {
        this.pwd2State = 'success'
        // console.log(this.pwd2State);
        return true;
      } else {
        this.pwd2State = 'error'
        Dialog({ message: '密码不一致' });
        return false;
      }
    },
    checkpwd1() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pword1)) {
        this.pwd1State = "success";
        return true;
      } else {
        this.pwd1State = "error";
        return false;
      }
    },
    checkForm() {
      // this.checkpwd2() && this.checkpwd1()
      console.log(this.pwd1State);
      console.log(this.pwd2State);
      if (this.pwd1State == "success" && this.pwd2State == "success") {
        let url = `ename=${this.name}&pword=${this.pword1}`;
        this.axios.post("/register", url).then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$router.push("/login");
          } else {
            console.log(1);
            Dialog({ message: '账号已存在' });
          }
        }
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
